import { useState, useEffect } from 'react'
import {List, Input} from 'antd'
import moment from 'moment';


export default function TimeConv() {

    const [inputVal, setInputVal] = useState<string>()

    const [time, setTime] = useState<{
        localDateTime: string, 
        localDate: string,
        second: number,
        mill: number,
        utc?: string
    }>()

    useEffect(() => {
        const now = new Date().getTime()
        const m = moment()
        setTime({
            localDateTime: m.format("YYYY-MM-DD HH:mm:ss:SSS"),
            localDate:  m.format("YYYY-MM-DD"),
            second: Math.floor(now / 1000),
            mill: now,
            utc: m.utcOffset(0).format("YYYY-MM-DD HH:mm:ss:SSS")
        })
        setInputVal(now+"")
    }, [])

    const timeSpan = {
        fontWeight: "bold",
        marginLeft: "5px"
    }

    const timeChange = (val:string) => {
        setInputVal(val)
        if (!val) {
            return
        }
        const temp = Number(val)
        let m
        if (!Number.isNaN(temp)){
            m = moment(temp)
        } else {
            m = moment(val, 'YYYY-MM-DD HH:mm:ss:SSS')
        }

        setTime({
            localDateTime: m.format("YYYY-MM-DD HH:mm:ss:SSS"),
            localDate:  m.format("YYYY-MM-DD"),
            second: Math.floor(m.valueOf() / 1000),
            mill: m.valueOf(),
            utc: m.utcOffset(0).format("YYYY-MM-DD HH:mm:ss:SSS")
        })

    }

    return (
        <div>
            <List
                // header={<div>Header</div>}
                // footer={<div>Footer</div>}
                bordered>
                <List.Item>
                <Input size="large" value={inputVal} placeholder="任意时间格式" onChange={(e) => {
                        timeChange(e.target.value)
                    }}/>
                    
                </List.Item>
                <List.Item>UTC+8 中国标准时间(本地时间) <span style={timeSpan}>{time?.localDateTime}</span></List.Item>
                <List.Item>UTC+8 中国标准时间(本地时间) 日期 <span style={timeSpan}>{time?.localDate}</span></List.Item>
                <List.Item>时间戳(秒) <span style={timeSpan}>{time?.second}</span></List.Item>
                <List.Item>时间戳(毫秒) <span style={timeSpan}>{time?.mill}</span></List.Item>
                <List.Item>标准时间(UTC) <span style={timeSpan}>{time?.utc}</span></List.Item>
            </List>

        </div>
    )
}
